<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
    ></VForm>

    <div class="formTitle-root">
      <div class="form-title-p">等级处置时限</div>
    </div>

    <div>
      <el-table :data="dealLimitList" border>
        <el-table-column prop="levelLabel" label="等级">
          <template slot-scope="scope">
            <el-input
              type="text"
              v-model="scope.row.levelLabel"
              :disabled = true
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="处置时限类型">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.type"
              :disabled = "openType=='detail'"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="limitUnit" label="时限单位">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.limitUnit"
              :disabled = "openType=='detail'"
            >
              <el-option
                v-for="item in limitUnitOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="limitNum" label="处置时限值">
          <template slot-scope="scope">
            <el-input
              type="number"
              v-model="scope.row.limitNum"
              :disabled = "openType=='detail'"
              placeholder="处置时限值（整数）"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { alarmDealConfigDetail,
    alarmDealConfigUpdate,
    alarmDealConfigAdd } from '@/api/alarm/dealConfig'
  import VForm from "@/components/VForm/index";
  export default {
    components: {
      VForm,
    },
    props: {
      width: {
        type: String,
        default: "70%",
      },
      title: {
        type: String,
        default: "详情",
      },
      id:{},
      openType:{
        type:String,
        default:"add"
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      modeTypeFormatOptions:{},
      typeOptions:{},
      limitUnitOptions:{},
    },
    watch: {
      'width': {
        handler(newVal, oldVal) {
          console.log('newVal===',newVal, oldVal)
          let w = this.width.split('%')[0]
          if(w>=60){
            this.rowspan = 2
          }else{
            this.rowspan = 1
          }
        },
        deep: true,
        immediate: true
      },
      'modeTypeFormatOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='modeType'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'openType':{
        handler(newVal, oldVal) {
          // 判断是否详情，添加不可编辑标识
          this.formData.options.forEach(t=>{
            t.disabled = newVal=='detail' ? true : false
            if(newVal=='edit'){
              if(t.key == 'modeType'){
                t.disabled = true
              }
            }
          })
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        rowspan:1,
        dict:{},
        formData: {
          form: {
            code:"",
            type:"",
            modeType:"",
            dealJson:"",
            remark:"",
          },
          options: [
            {
              title: "标识码",
              key: "code",
              type: "text",
            },
            {
              title: "预警类型",
              key: "modeType",
              type: "cascader",
              multiple:false,
              option: {
                data: this.modeTypeFormatOptions,
                props: {
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title: "备注",
              key: "remark",
              type: "textarea",
              columnWidth: 'w100max',
            },
          ],
          rules: {
            code :[
              { required: true, message: '请输入', trigger: 'blur' },
              {max:36, message: '长度最大为36个字符', trigger: 'blur'}
            ],
            modeType :[
              { required: true, message: '请输入', trigger: 'change' },
            ],
            remark :[
              {max:128, message: '长度最大为128个字符', trigger: 'blur'}
            ],
          },
          labelWidth: "140px",
        },
        dealLimitList:[],
        // 字典
      };
    },
    methods: {
      submitFormat(params={}){
        // （1报警 2预警）
        params.type = 2
        params.modeType =this.formData.form.modeType.toString()
        params.dealJson = JSON.stringify(this.dealLimitList)
        return params
      },
      loadFormat(){
        this.formData.form.modeType = this.formData.form.modeType.split(",")
        this.dealLimitList = JSON.parse(this.formData.form.dealJson)
      },
      isBlank(val){
        if(val==null || val =='' || val == undefined){
          return true
        }
        return false
      },
      sure(){
        console.log('sure===',this.formData.form)
        this.$refs.vformComponents.$refs.form.validate().then(res=>{
          for(let i =0; i<this.dealLimitList.length; i++){
            let item = this.dealLimitList[i]
            if(item.type==1 && (this.isBlank(item.limitUnit) || this.isBlank(item.limitNum))){
              this.$message.warning("限制类型请补全信息！")
              return;
            }
          }
          let param = this.submitFormat(this.formData.form)
          if(this.openType == "add"){
            this.add(param)
          }else{
            this.update(param)
          }
        })
      },
      add(param){
        param.id = null
        alarmDealConfigAdd(param).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      update(param){
        alarmDealConfigUpdate(param).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.updateSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      cancel(){
        this.close()
      },
      handleClose(done) {
        done()
        this.close()
      },
      closeSuccess(){
        this.$refs.vformComponents.$refs.form.resetFields();
        this.$emit('success')
      },
      close(){
        this.$refs.vformComponents.$refs.form.resetFields();
        this.$emit('close')
      },
      getData(){
        this.dealLimitList = [
          {levelLabel:"一级预警", level:1 , type:0, limitUnit:"" , limitNum:""},
          {levelLabel:"二级预警", level:2 , type:0, limitUnit:"" , limitNum:""},
          {levelLabel:"三级预警", level:3 , type:0, limitUnit:"" , limitNum:""},
          {levelLabel:"四级预警", level:4 , type:0, limitUnit:"" , limitNum:""},
        ]
        if(this.openType!="add"){
          alarmDealConfigDetail(this.id).then(res=>{
            if(res.code==200){
              this.formData.form = res.data
              this.loadFormat()
            }else{
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          })
        }
      }
    },
  };
</script>

<style lang="scss"  scoped>
  @import "@/styles/element-variables.scss";
  .formTitle-root{
    padding: 10px 0;
    border-bottom: 1px solid #EFEFEF;
    font-size: 16px;
    position: relative;
    margin-bottom: 10px;
    .form-title-p{
      padding-left: 10px;
      border-left: 4px solid $--color-primary;
    }
  }
  /*修改禁用样式*/
  ::v-deep .is-disabled .el-input__inner  {
    background-color:white;
    color: rgb(0, 0, 0);
  }
  ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner{
    border-color: $--color-primary;
    background: $--color-primary;
  }
  ::v-deep .el-radio__input.is-disabled + span.el-radio__label{
    color: rgb(0, 0, 0);
  }
  ::v-deep .el-textarea.is-disabled .el-textarea__inner{
    background: white;
    color: rgb(0, 0, 0);
  }
  // numberInput样式 css
  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  ::v-deep input[type='number'] {
    -moz-appearance: textfield !important;
  }
</style>
